<script setup>
import { updateAdminProfile, getAdminProfile } from '@/api/admin'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Message } from '@element-plus/icons-vue'
const userInfo = ref({
  id: '',
  email: '',
  phone:'',
  department: ''
})
const loading = ref(false)

const rules = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ]
}

const formRef = ref()

// 获取管理员信息
const loadAdminInfo = async () => {
  try {
    const response = await getAdminProfile()
    console.log('管理员信息响应:', response)

    // 适配不同的响应格式
    const data = response.data || response
    userInfo.value = {
      id: data.id || '',
      email: data.email || '',
      phone: data.phone || '',
      department: data.department || ''
    }
  } catch (error) {
    console.error('获取管理员信息失败:', error)
    ElMessage.error('获取管理员信息失败：' + (error.response?.data?.message || error.message || '未知错误'))
  }
}

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    loading.value = true
    try {
      const response = await updateAdminProfile(userInfo.value)
      if (response.code === 200 || response.status === 'success') {
        await loadAdminInfo()
        ElMessage.success('修改成功！')
      } else {
        ElMessage.error(response.message || '修改失败')
      }
    } catch (error) {
      console.error('更新管理员信息失败:', error)
      ElMessage.error('修改失败：' + (error.response?.data?.message || error.message || '未知错误'))
    } finally {
      loading.value = false
    }
  }
}

// 页面加载时获取管理员信息
onMounted(() => {
  loadAdminInfo()
})
</script>

<template>
  <div>
    <el-card class="profile-card">
      <template #header>
        <h2>管理员个人信息</h2>
      </template>

      <el-row>
        <el-col :span="12">
          <el-form ref="formRef" :model="userInfo" :rules="rules" label-width="100px" size="large">
            <el-form-item label="用户部门" prop="department">
              <el-input  :prefix-icon="User" v-model="userInfo.department" placeholder="请输入用户部门名称">
              </el-input>
            </el-form-item>
            <el-form-item label="用户手机号码" prop="phone">
              <el-input  :prefix-icon="Message" v-model="userInfo.phone" placeholder="请输入邮箱地址">
              </el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input  :prefix-icon="Message" v-model="userInfo.email" placeholder="请输入邮箱地址">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :loading="loading">
                提交修改
              </el-button>
              <el-button @click="loadAdminInfo">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


